<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button v-on:click="count++">
				You clicked me {{ count }} times.
			</button>
			<button v-on:click="count++">
				You clicked me {{ count }} times.
			</button>
			<button v-on:click="count++">
				You clicked me {{ count }} times.
			</button>
			<div id="">
				
			</div>
			在子组件中使用全局组件
			<button-counter></button-counter>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 定义一个名为 button-counter 的新组件
			//Vue.component('名称', {
			//配置
			// })
			Vue.component('button-counter', {
				//data是一个function函数，防止组件多次使用时，数据共享
				data: function() {
					return {
						count: 0
					}
				},
				//组件的内容
				template: `<button v-on:click="count++">
								You clicked me {{ count }} times.
							</button>`
			});

			new Vue({
				el: "#app",
				data: {
					msg: "父组件内容",
					count: 0
				},
				components: {
					'button-sub': {
						template: `<button-counter></button-counter>`
					}
				}
			})
		</script>
	</body>
</html>
